<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/../static/layui/css/layui.css">
    <style>
        table {
            margin: auto;
            border: 1px solid #bfbce2;
            margin-top: 50px;

        }

        tr {
            text-align: center;
        }

        th {
            height: 50px;
            background-color: #dcd9fa;
            border: 1px solid #bfbce2;
        }

        td {
            width: 150px;
            height: 50px;
            border: 1px solid #bfbce2;
        }

        a {
            border-bottom: 1px solid #bfbce2;
        }
        #a_two{
            display: none;
        }
    </style>

</head>

<body>
    <div class="container">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <th>用户Id</th>
                <th>用户名</th>
                <th>是否活跃</th>
                <th>是否删除</th>
                <th>注册时间</th>
                <th>操作</th>
            </tr>
            {% for item in users %}
            <tr>
                <td>{{item.id}}</td>
                <td>{{item.username}}</td>
                <td>{{item.isActivelabel}}</td>
                <td>{{item.isDeletelabe}}</td>
                <td>{{item.createTime}}</td>
                <td>
                    <a id="a_one" onclick="remove('{{item.id}}')">删除</a>

                    <a id="a_two">撤回删除</a> 

                    <a id="a_one" onclick="iceUser('{{item.id}}')">冻结</a>
                    <a id="a_two">撤回冻结</a>
                </td>
            </tr>
            {% endfor %}
        </table>
    </div>


    <script src="/../static/js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="/../static/layui/layui.js"></script>
    <!-- <script>
        let id = $('td').length;
        console.log(id);
        for(var i = 0; i < id;i++){
            let name = $('td')[i].innerText;
            if(name === "已冻结"){
                let html = $('td').eq(i+3).css("display","none");
                let h = '<a>撤回冻结</a>';
                $('td').eq(i+3).append(h)
                console.log(html);
            }else if(name === "已删除"){
                $('td').eq(i+3).css("display","none");
            }
        }      
    </script> -->
    <script>
        function remove(id) {
            console.log(id);
            layer.confirm('确定删除用户吗？', { icon: 3, title: '提示' }, function (index) {
                axios({
                    method: 'post',
                    url: '/userpage/remove',
                    data: {
                        removeId: id
                    }
                }).then(function (response) {
                    // axios工具下，服务器真正返回的数据在返回对象的data中
                    var res = response.data;
                    if (res.code === 200) {
                        window.location.href = '/root/userpage';
                    }
                })
                layer.close(index);

            });
        }

        function iceUser(id) {
            layer.confirm('确定冻结用户吗？', { icon: 3, title: '提示' }, function (index) {
                axios({
                    method: 'post',
                    url: '/userpage/ice',
                    data: {
                        iceId: id
                    }
                }).then(function (response) {
                    // axios工具下，服务器真正返回的数据在返回对象的data中
                    var res = response.data;
                    if (res.code === 200) {
                        window.location.href = '/root/userpage';
                    }
                })
                layer.close(index);
            });
        }
    </script>
</body>

</html>